<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>九盛中彩</title>
		<script src="js/mui.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/rem.js"></script>
		

		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/tab.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		
		
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title">九盛中彩</h1>
			<h5 id='setting' class=" mui-pull-right mui-icon mui-icon-search"></h5>
		</header>
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home" ></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">彩店</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">九盛中彩</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">服务</span>
			</a>
			<a class="mui-tab-item" href="user.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		
		
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="content-body">
				<!--banner-->
				<div class="mui-slider banner">
					<div class="mui-slider-group mui-slider-loop">
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate"></div>
						<div class="mui-slider-item">
							<a href="#"><img src="images/banner1.jpg" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="images/banner1.jpg" /></a>
						</div>

						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="images/banner1.jpg" /></a>
						</div>
					</div>

					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>

					</div>
				</div>

				<!--banner-->
				<div class="xian"></div>
				<div class="index-card-content">
					
					323
				</div>
				
				<div class="xian"></div>

				<!--兑换-->
				<div class="index-product">
					<h3>绿币兑换</h3>
					<ul class="mui-table-view mui-grid-view" style="padding: 0px; background: none;">
						
						
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#">
								<img class="mui-media-object" src="images/p1.jpg">
								<div class="mui-media-body mui-media-title">台灯</div>
								<div class="mui-media-body mui-media-price">2000绿币</div>
							</a>
							<a href="#middlePopover">
								<div class="mui-media-body mui-media-circle" data-id="1" id="1" >兑换</div>
							</a>
						</li>
						
						<li class="mui-table-view-cell mui-media mui-col-xs-6" style="float: right;">
							<a href="#">
								<img class="mui-media-object" src="images/p1.jpg">
								<div class="mui-media-body mui-media-title">台灯</div>
								<div class="mui-media-body mui-media-price">2000绿币</div>
							</a>
							<a href="#middlePopover">
							<div class="mui-media-body mui-media-circle" data-id="2" id="2" >兑换</div>
							</a>
						</li>
						
						
						
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#">
								<img class="mui-media-object" src="images/p2.jpg">
								<div class="mui-media-body mui-media-title">耳机</div>
								<div class="mui-media-body mui-media-price">2000绿币</div>
							</a>
							<a href="#middlePopover">
								<div class="mui-media-body mui-media-circle" id="3">兑换</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6" style="float: right;">
							<a href="#">
								<img class="mui-media-object" src="images/p2.jpg">
								<div class="mui-media-body mui-media-title">耳机</div>
								<div class="mui-media-body mui-media-price">2000绿币</div>
							</a>
							<a href="#middlePopover">
								<div class="mui-media-body mui-media-circle" id="4">兑换</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#">
								<img class="mui-media-object" src="images/p3.jpg">
								<div class="mui-media-body mui-media-title">汤锅</div>
								<div class="mui-media-body mui-media-price">2000绿币</div>
							</a>
							<a href="#middlePopover">
								<div class="mui-media-body mui-media-circle" id="5">兑换</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6" style="float: right;">
							<a href="#">
								<img class="mui-media-object" src="images/p3.jpg">
								<div class="mui-media-body mui-media-title">汤锅</div>
								<div class="mui-media-body mui-media-price">2000绿币</div>
							</a>
							<a href="#middlePopover">
							<div class="mui-media-body mui-media-circle"  id="6">兑换</div>
							</a>
						</li>
					</ul>
				</div>

				<div style="height:50px;"></div>
			</div>
		</div>

	
		<script>
			
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			
			
			mui('body').on('tap', 'a', function () { document.location.href = this.href; });
			mui('body').on('tap', '.mui-media-circle', function () { 
				
				var s = this.id;
				//document.location.href = "#middlePopover"; 
				console.log(s)
				
			});
			
			
			mui('body').on('tap', '.active-day', function () {
				
				var pop = document.getElementById("qiandao-zhezhao");
				pop.classList.remove('qiandao-zhezhao-close');
				pop.classList.add('qiandao-zhezhao-open');
				
				
			});
			
			mui('body').on('tap', '.qiandao-zhezhao', function () {
				
				var pop = document.getElementById("qiandao-zhezhao");
				pop.classList.remove('qiandao-zhezhao-open');
				pop.classList.add('qiandao-zhezhao-close');
			
				
			});
			
			
			
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						//						height: 50, //可选,默认50.触发下拉刷新拖动距离,
						//						auto: true, //可选,默认false.首次加载自动下拉刷新一次
						//						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						//						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						//						contentrefresh: "正在努力刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: setDown //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
					//					,
					//					up: {
					//						contentrefresh: '正在加载...',
					//						callback: setUp
					//					}
				},
				gestureConfig: {
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: true, //默认为false
					swipe: true, //默认为true
					drag: true, //默认为true
					hold: false, //默认为false，不监听
					release: false //默认为false，不监听
				},
				swipeBack: true //启用右滑关闭功能
			});

			//			mui(".mui-scroll-wrapper").scroll({
			//				bounce: false, //滚动条是否有弹力默认是true
			//				indicators: false, //是否显示滚动条,默认是true
			//				deceleration: mui.os.ios ? 0.0003 : 0.0009 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			//			});

			function setDown() {
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			}

			function setUp() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			}
//			mui('.index-qiandao').addEventListener("swipeleft",function(){
//			     console.log("你正在向左滑动");
//			});

		</script>
		
	</body>

</html>